<template>
  <div>
    <headerXX :name="title"></headerXX>
    <div class="pull-refresh">
      <div class="ulbox">
        <div class="ul_top">
          <div class="ul_left">
            <van-image
              class="img"
              radius="4"
              width="100"
              height="100"
              :src="decodedString[0].goodImage"
              mode=""
            >
            </van-image>
          </div>
          <div class="ul_right">
            <div class="top">
              <div class="name">
                {{ decodedString[0].goodName }}
              </div>
              <div class="text">
                {{ decodedString[0].goodSpecifications }}
              </div>
            </div>
            <van-image
              class="img"
              radius="4"
              width="80"
              height="30"
              :src="require('../../static/ZYSC.png')"
              mode=""
            >
            </van-image>
            <!-- <u--image style="margin-top: 10rpx;" radius="10" class="img" :showLoading="true"
						:src="require('../../../static/ZYSC.png')" width="150rpx" height="60rpx"
						mode="widthFix"></u--image> -->
            <div class="bottom">
              {{ decodedString[0].goodDescription }}
            </div>
          </div>
        </div>
        <div class="NR">
          <div class="title">
            <div class="H">-</div>
            <div class="XX WZ_size_14">医生简介</div>
            <div class="H">-</div>
          </div>
          <div class="RYXX">
            {{ decodedString[0].remark }}
          </div>
        </div>
      </div>
      <div class="DI">
        <div class="DI_bottom" @click="BDXX">预 约</div>
      </div>
    </div>
    <ReL
      :dateshow="dateshow"
      @closeCalendar="closeCalendar"
      @calendar="calendar"
    ></ReL>
  </div>
</template>

<script>
import headerXX from "../../components/title.vue";
import moment from "moment";
import ReL from "../../components/ReL.vue";
import { getAccessToken } from "../../common/YYSLxx";
import { getgoods } from "../../common/SPXX";
export default {
  components: { headerXX, ReL },
  data() {
    return {
      title: "医生详情",
      decodedString: [],
      dateshow: false,
      dateXX: "",
    };
  },
  created() {
    this.decodedString = JSON.parse(
      decodeURIComponent(getgoods().replace(/%25/g, "%"))
    );
  },
  mounted() {},
  methods: {
    closeCalendar(val) {
      this.dateshow = val;
    },
    BDXX() {
      this.dateshow = true;
    },
    //确认时间
    calendar(e) {
      this.dateshow = false;
      this.dateXX = e;
      const currentTimeStamp = moment().unix();
      const min = BigInt("1" + "0".repeat(18));
      const max = BigInt("1" + "0".repeat(19));
      const randomNum =
        min + BigInt(Math.floor(Math.random() * Number(max - min)));
      // // let goodMessage = uni.getStorageSync('SPXX')
      let goodMessage = this.decodedString;
      let itemXX = {
        SBBT: "专家团队",
        companyId: goodMessage[0].companyId,
        orderNumber: currentTimeStamp + randomNum.toString(), //预约编号
        siteId: "118",
        orderProject: "专家团队", //预约项目
        orderProjectType: "0", //0:   1:  (区分健康自测类型与其他类型)
        orderCreationTime: moment().format("YYYY-MM-DD"), //下单时间
        estimateArrivalTime: this.dateXX, //服务时间
        estimateSumPrice: "", //预估费用
        orderSubType: "", //预约类型
        serviceDescription: "", //服务介绍
        orderLocation: "", //预约地址(非空展示)
        serviceTip: "", //温馨提示(非空展示)
        goodSumPrice: "", //总价
        goodInfo: goodMessage, //服务信息
        serviceTitleList: ["医生姓名", "", "职称", ""], //服务标题
        goodList: [
          {
            goodId: goodMessage[0].goodId,
            goodName: goodMessage[0].goodName,
            servicePrice: "",
            serviceQty: goodMessage[0].goodSpecifications,
            goodCountPrice: "",
            serviceProjectName: "",
            remark: "",
            serviceMessage: "",
          },
        ],
      };
      getAccessToken(itemXX, "专家团队");
    },
  },
};
</script>

<style lang="less" scoped>
@import "../../static/css/index.less";
// @import "../../static/css/GYcSS.less";
.ulbox {
  padding: 10px;
  background: rgb(247, 247, 247);
  .ul_top {
    display: flex;
    width: 100%;
    height: 100px;

    .ul_left {
      width: 100px;
    }

    .ul_right {
      margin-left: 10px;
      padding: 10px;

      .top {
        display: flex;
        align-items: center;

        .name {
          font-size: 18px;
          font-weight: 700;
          margin-right: 10px;
        }

        .text {
          font-size: 12px;
          color: rgb(21, 21, 26);
        }
      }

      .bottom {
        color: rgba(21, 21, 26, 0.6);

        font-size: 10px;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2; /* 定义文本的行数 */
        overflow: hidden;
        text-overflow: ellipsis;
      }
    }
  }

  .NR {
    background: #fff;
    width: 95%;
    padding: 10px;
    border-radius: 15px;
    position: relative;
    margin-top: 20px;
    padding-top: 40px;
    height: calc(
      var(--real-vh, 1vh) * 100 - 320px - env(safe-area-inset-bottom) -
        env(safe-area-inset-top)
    );
    overflow-y: auto;

    .RYXX {
      color: rgba(69, 67, 67, 1);
      line-height: 30px;
      letter-spacing: 1px;
      text-indent: 2em;
      font-size: 12px;
    }

    .title {
      letter-spacing: 1px;
      display: flex;
      align-items: center;
      color: rgb(54, 194, 168);
      position: absolute;
      left: 50%;
      top: 25px;
      transform: translate(-50%, -10px);

      .H {
        font-size: 14px;
      }

      .XX {
        font-weight: 700;
        margin: 0 5px;
      }
    }
  }
}
.DI {
  width: 100%;
  text-align: center;
  font-weight: 600;
  margin-top: 10px;
}

.DI_top {
  letter-spacing: 1px;
  color: rgb(2, 117, 113);
  margin-bottom: 5px;
  font-size: 13px;
}

.DI_bottom {
  width: 90%;
  height: 50px;
  line-height: 50px;
  background: rgb(54, 194, 168);
  color: #fff;
  border-radius: 5px;
  letter-spacing: 3px;
  font-size: 16px;
  margin: 2px auto 10px;
}
</style>